<!DOCTYPE html>
<html lang="en">

<head>
    <title>Datta Able - Most Complete Bootstrap Admin Template</title>
    <!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 10]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
    <meta name="keywords" content="admin templates, bootstrap admin templates, bootstrap 4, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, datta able, datta able bootstrap admin template">
    <meta name="author" content="Codedthemes" />

    <!-- Favicon icon -->
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    <!-- fontawesome icon -->
    <link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">

    <!-- ======================= -->
    <!-- ======= PLUGIN CSS ===== -->
    <!-- ======================= -->

    <!-- animation css -->
    <link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
    <!-- gridstack css -->
    <link rel="stylesheet" href="assets/plugins/gridstack/css/gridstack.min.css">
    <!-- Bootstrap datetimepicker css -->
    <link href="assets/plugins/bootstrap-datetimepicker/css/prettify.css.html" rel="stylesheet">
    <link href="assets/plugins/bootstrap-datetimepicker/css/docs.css.html" rel="stylesheet">
    <link rel="stylesheet" href="assets/plugins/bootstrap-datetimepicker/css/bootstrap-datepicker3.min.css">
    <!-- ekko-lightbox css -->
    <link rel="stylesheet" href="assets/plugins/ekko-lightbox/css/ekko-lightbox.min.css">
    <link rel="stylesheet" href="assets/plugins/lightbox2-master/css/lightbox.min.css">
    <!-- notification css -->
    <link rel="stylesheet" href="assets/plugins/notification/css/notification.min.css">
    <!-- pnotify css -->
    <link rel="stylesheet" href="assets/plugins/pnotify/css/pnotify.custom.min.css">
    <!-- Rating css -->
    <link rel="stylesheet" href="assets/plugins/ratting/css/bars-1to10.css">
    <link rel="stylesheet" href="assets/plugins/ratting/css/bars-horizontal.css">
    <link rel="stylesheet" href="assets/plugins/ratting/css/bars-movie.css">
    <link rel="stylesheet" href="assets/plugins/ratting/css/bars-pill.css">
    <link rel="stylesheet" href="assets/plugins/ratting/css/bars-reversed.css">
    <link rel="stylesheet" href="assets/plugins/ratting/css/bars-square.css">
    <link rel="stylesheet" href="assets/plugins/ratting/css/bootstrap-stars.css">
    <link rel="stylesheet" href="assets/plugins/ratting/css/css-stars.css">
    <link rel="stylesheet" href="assets/plugins/ratting/css/fontawesome-stars.css">
    <link rel="stylesheet" href="assets/plugins/ratting/css/fontawesome-stars-o.css">
    <!-- rangeslider css -->
    <link rel="stylesheet" href="assets/plugins/range-slider/css/bootstrap-slider.min.css">
    <!-- owl-carousel css -->
    <link rel="stylesheet" href="assets/plugins/owl-carousel/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/plugins/owl-carousel/css/owl.theme.default.min.css">
    <!-- prism css -->
    <link rel="stylesheet" href="assets/plugins/prism/css/prism.min.css">
    <!-- jstree css -->
    <link rel="stylesheet" href="assets/plugins/jstree/css/style.min.css">
    <!-- nestable master css -->
    <link rel="stylesheet" href="assets/plugins/nestable-master/css/nestable.min.css">
    <!-- toolbar css -->
    <link rel="stylesheet" href="assets/plugins/toolbar/css/jquery.toolbar.css">
    <!-- gridstack-custom css -->
    <link rel="stylesheet" href="assets/css/pages/gridstack.css">
    <!-- pnotify-custom css -->
    <link rel="stylesheet" href="assets/css/pages/pnotify.css">
    <!-- rangeslider-custom css -->
    <link rel="stylesheet" href="assets/css/pages/rangeslider.css">
    <!-- vendor css -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- Required Js -->
    <script src="assets/js/vendor-all.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>

    <!-- highlight.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script src="assets/plugins/clipboard/js/clipboard.js"></script>
    <!-- sweet alert Js -->
    <script src="assets/plugins/sweetalert/js/sweetalert.min.js"></script>
    <!-- gridstack Js -->
    <script src="assets/plugins/jquery-ui/js/jquery-ui.js"></script>
    <script src="assets/plugins/gridstack/js/lodash.min.js"></script>
    <script src="assets/plugins/gridstack/js/gridstack.min.js"></script>
    <script src="assets/plugins/gridstack/js/gridstack.jQueryUI.min.js"></script>
    <!-- ekko-lightbox Js -->
    <script src="assets/plugins/ekko-lightbox/js/ekko-lightbox.min.js"></script>
    <script src="assets/plugins/lightbox2-master/js/lightbox.min.js"></script>
    <!-- notification Js -->
    <script src="assets/plugins/notification/js/bootstrap-growl.min.js"></script>
    <!-- pnotify Js -->
    <script src="assets/plugins/pnotify/js/pnotify.custom.min.js"></script>
    <script src="assets/plugins/pnotify/js/notify-event.js"></script>
    <!-- Rating Js -->
    <script src="assets/plugins/ratting/js/jquery.barrating.min.js"></script>
    <!-- range slider Js -->
    <script src="assets/plugins/range-slider/js/bootstrap-slider.min.js"></script>
    <!-- owl-carousel Js -->
    <script src="assets/plugins/owl-carousel/js/owl.carousel.min.js"></script>
    <!-- prism Js -->
    <script src="assets/plugins/prism/js/prism.min.js"></script>
    <!-- jstree Js -->
    <script src="assets/plugins/jstree/js/jstree.min.js"></script>
    <!-- nestable master Js -->
    <script src="assets/plugins/nestable-master/js/jquery.nestable.js"></script>
    <!-- toolbar Js -->
    <script src="assets/plugins/toolbar/js/jquery.toolbar.min.js"></script>
    <!-- datepicker js -->
    <script src="assets/plugins/bootstrap-datetimepicker/js/bootstrap-datepicker.min.js"></script>


    <script>
        var page = {
            bootstrap: 3
        };

        function swap_bs() {
            page.bootstrap = 3;
        }
    </script>

    <style>pre[class*=language-]:after, pre[class*=language-]:before{
            display: none;
        }
        .docs-page-header {
        	font-weight: 400;
        	font-size: 27px;
        	margin: 0;
        	padding: 15px 50px;
        	line-height:40px;
        	height: 70px;
        }
        .docs-page-header.bg-dark {
            background-color: rgb(63, 77, 103) !important;
        }

        .docs-header-path {
        	opacity: 1;
        }
        .docs-wrapper {
        	min-height: calc(100vh - 70px);
        	position: relative;
        }

        .docs-inner {
        	padding: 40px;
        }

        .docs-sections {
        	position: fixed;
        	top: 70px;
        	left: 0;
        	bottom: 0;
        	overflow: hidden;
        }

        .docs-sections-inner {
        	padding-top: 32px;
        	padding-left: 32px;
        	padding-right:32px;
        	margin: 0;
        }

        .docs-sections-inner>li:first-child {
        	padding-top: 0 !important;
        }

        .docs-sections-inner li {
        	list-style: none;
        	padding: 5px 0;
        	margin: 0;
        	font-size:14px;
        }

        .docs-sections,
        .docs-sections a,
        .docs-sections a:focus,
        .docs-sections a:active {
        	color: #6c757d;
        	line-height: 1.3;
            padding: 0;
        }

        .docs-sections a:hover {
        	color: #333;
            position:relative;
        }

        .docs-sections a.active {
        	color: #333;
        	font-weight: bold;
            position:relative;
        }
        .docs-sections a.active:before , .docs-sections a:hover:before {
            content: "";
            position: absolute;
            width: 5px;
            height: 5px;
            background: #000;
            border-radius: 50%;
            top: 8px;
            left: -15px;
        }

        .docs-page-header,
        .docs-wrapper {
        	min-width: 1200px;
        }

        .docs-sections {
        	width: 230px;
            background: rgba(63, 77, 103, 0.05);
        }

        .docs-wrapper {
        	padding-left: 230px;
        }

        h2.docs-header {
        	margin-bottom:32px;
        	font-size: 24px;
        	position: relative;
        }

        h2.docs-header~h2.docs-header {
        	margin-top: 50px;
        }
        .datepicker>.datepicker-days {
            display: block;
        }

        ol.linenums {
            margin: 0 0 0 -8px;
        }
    </style>
</head>

<body>
    <h2 class="docs-page-header bg-dark text-white">
        <span class="docs-header-path">Advance Components</span>
    </h2>
    <div class="docs-wrapper">
        <div class="docs-sections">
            <ul class="docs-sections-inner">
                <li class="nav-item"><a class="nav-link active" href="#page-alert">Alert</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-datepicker">Datepicker</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-grid">Grid Stack</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-lightbox">LightBox</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-notification">Notification</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-pnotify">Pnotify</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-rating">Rating</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-range">Range Slider</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-slider">Slider</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-highlighter">Syntax Highlighter</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-view">Tree View</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-nestable">Nestable</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-toolbar">Toolbar</a></li>
            </ul>
        </div>
        <div class="docs-inner">
            <h2 class="docs-header" id="page-alert">Alert</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <button type="button" class="btn btn-primary sweet-basic">Basic</button>
                            <button type="button" class="btn btn-success sweet-success">Success</button>
                            <button type="button" class="btn btn-warning sweet-warning">warning</button>
                            <button type="button" class="btn btn-danger sweet-error">error</button>
                            <button type="button" class="btn btn-info sweet-info">info</button>
                            <button type="button" class="btn btn-primary sweet-multiple">Success or Cancel</button>
                            <button type="button" class="btn btn-primary sweet-prompt">Prompt</button>
                            <button type="button" class="btn btn-primary sweet-ajax">Ajax</button>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $('.sweet-basic').on('click', function() {
                                swal('Hello world!');
                            });
                            $('.sweet-success').on('click', function() {
                                swal("Good job!", "You clicked the button!", "success");
                            });
                            $('.sweet-warning').on('click', function() {
                                swal("Good job!", "You clicked the button!", "warning");
                            });
                            $('.sweet-error').on('click', function() {
                                swal("Good job!", "You clicked the button!", "error");
                            });
                            $('.sweet-info').on('click', function() {
                                swal("Good job!", "You clicked the button!", "info");
                            });
                            $('.sweet-multiple').on('click', function() {
                                swal({
                                        title: "Are you sure?",
                                        text: "Once deleted, you will not be able to recover this imaginary file!",
                                        icon: "warning",
                                        buttons: true,
                                        dangerMode: true,
                                    })
                                    .then((willDelete) => {
                                        if (willDelete) {
                                            swal("Poof! Your imaginary file has been deleted!", {
                                                icon: "success",
                                            });
                                        } else {
                                            swal("Your imaginary file is safe!", {
                                                icon: "error",
                                            });
                                        }
                                    });
                            });
                            $('.sweet-prompt').on('click', function() {
                                swal("Write something here:", {
                                        content: "input",
                                    })
                                    .then((value) => {
                                        swal(`You typed: ${value}`);
                                    });
                            });
                            $('.sweet-ajax').on('click', function() {
                                swal({
                                        text: 'Search for a movie. e.g. "La La Land".',
                                        content: "input",
                                        button: {
                                            text: "Search!",
                                            closeModal: false,
                                        },
                                    })
                                    .then(name => {
                                        if (!name) throw null;
                                        return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
                                    })
                                    .then(results => {
                                        return results.json();
                                    })
                                    .then(json => {
                                        const movie = json.results[0];
                                        if (!movie) {
                                            return swal("No movie was found!");
                                        }
                                        const name = movie.trackName;
                                        const imageURL = movie.artworkUrl100;
                                        swal({
                                            title: "Top result:",
                                            text: name,
                                            icon: imageURL,
                                        });
                                    })
                                    .catch(err => {
                                        if (err) {
                                            swal("Oh noes!", "The AJAX request failed!", "error");
                                        } else {
                                            swal.stopLoading();
                                            swal.close();
                                        }
                                    });
                            });
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Sweet alert Js --&gt;
                    &lt;script src="assets/plugins/sweetalert/js/sweetalert.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-datepicker">Datepicker</h2>
            <div class="row">
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Days of Week Disabled</h5>
                        </div>
                        <div class="card-block">
                            <input type="text" class="form-control" id="d_week">
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).ready(function() {
                            $('#d_week').datepicker({
                                daysOfWeekDisabled: "2"
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Days of Week Highlighted</h5>
                        </div>
                        <div class="card-block">
                            <input type="text" class="form-control" id="d_highlight">
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).ready(function() {
                            $('#d_highlight').datepicker({
                                daysOfWeekHighlighted: "1"
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>AutoClose</h5>
                        </div>
                        <div class="card-block">
                            <input type="text" class="form-control" id="d_auto">
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).ready(function() {
                            $('#d_auto').datepicker({
                                autoclose: true
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>DatesDisabled</h5>
                        </div>
                        <div class="card-block">
                            <input type="text" class="form-control" id="d_disable">
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).ready(function() {
                            $('#d_disable').datepicker({
                                datesDisabled: ['10/15/2018', '10/16/2018', '10/17/2018', '10/18/2018']
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Toggle Active</h5>
                        </div>
                        <div class="card-block">
                            <input type="text" class="form-control" id="d_toggle">
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).ready(function() {
                            $('#d_toggle').datepicker({
                                keyboardNavigation: false,
                                forceParse: false,
                                toggleActive: true
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Today Highlight</h5>
                        </div>
                        <div class="card-block">
                            <input type="text" class="form-control" id="d_today">
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).ready(function() {
                            $('#d_today').datepicker({
                                keyboardNavigation: false,
                                forceParse: false,
                                todayHighlight: true
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Calendar Weeks</h5>
                        </div>
                        <div class="card-block">
                            <input type="text" class="form-control" id="disp_week">
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).ready(function() {
                            $('#disp_week').datepicker({
                                calendarWeeks: true
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-8 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Date Range</h5>
                        </div>
                        <div class="card-block">
                            <div class="input-daterange input-group" id="datepicker_range">
                                <input type="text" class="form-control text-left" placeholder="Start date" name="start" />
                                <input type="text" class="form-control text-right" placeholder="End date" name="end" />
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).ready(function() {
                            $('#datepicker_range').datepicker({});
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Datepicker css --&gt;
                    &lt;link href="assets/plugins/bootstrap-datetimepicker/css/prettify.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/bootstrap-datetimepicker/css/docs.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/bootstrap-datetimepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Datepicker Js --&gt;
                    &lt;script src="assets/plugins/bootstrap-datetimepicker/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-grid">Grid Stack</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5 class="d-inline">Float Grid Demo</h5>
                            <a class="btn btn-primary float-right" id="add-new-widget" href="#!">Add Widget</a>
                            <div class="clearfix"></div>
                            <hr>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="trash"> </div>
                                </div>
                            </div>
                            <hr>
                            <div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
                                <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
                                    <div class="grid-stack-item-content">1</div>
                                </div>
                                <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
                                    <div class="grid-stack-item-content">2</div>
                                </div>
                                <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2" data-gs-min-width="2" data-gs-no-resize="yes">
                                    <div class="grid-stack-item-content d-flex align-items-center justify-content-center drg-widget">
                                        <div class="">
                                            <span class="feather icon-move mr-2 f-64"></span>
                                            <h5 class="text-white">Drag me! </h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="grid-stack-item" data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2">
                                    <div class="grid-stack-item-content">4</div>
                                </div>
                                <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2">
                                    <div class="grid-stack-item-content">5</div>
                                </div>
                                <div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4">
                                    <div class="grid-stack-item-content">6</div>
                                </div>
                                <div class="grid-stack-item" data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2">
                                    <div class="grid-stack-item-content">7</div>
                                </div>
                                <div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2">
                                    <div class="grid-stack-item-content">8</div>
                                </div>
                                <div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2">
                                    <div class="grid-stack-item-content">9</div>
                                </div>
                                <div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2">
                                    <div class="grid-stack-item-content">10</div>
                                </div>
                                <div class="grid-stack-item" data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2">
                                    <div class="grid-stack-item-content">11</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            // [ gridstack ] start
                            $(function() {
                                var options = {
                                    float: true,
                                    removable: '.trash',
                                    removeTimeout: 100,
                                    acceptWidgets: '.grid-stack-item'
                                };
                                $('.grid-stack').gridstack(options);
                                new function() {
                                    this.items = [{
                                        x: 0,
                                        y: 0,
                                        width: 2,
                                        height: 2
                                    }, {
                                        x: 3,
                                        y: 1,
                                        width: 1,
                                        height: 2
                                    }, {
                                        x: 4,
                                        y: 1,
                                        width: 1,
                                        height: 1
                                    }, {
                                        x: 2,
                                        y: 3,
                                        width: 3,
                                        height: 1
                                    }, {
                                        x: 2,
                                        y: 5,
                                        width: 1,
                                        height: 1
                                    }];
                                    this.grid = $('.grid-stack').data('gridstack');
                                    this.addNewWidget = function() {
                                        var node = this.items.pop() || {
                                            x: 12 * Math.random(),
                                            y: 5 * Math.random(),
                                            width: 1 + 3 * Math.random(),
                                            height: 1 + 3 * Math.random()
                                        };
                                        this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div class="grid-stack-item-content">New Added Widget</div><div/>'),
                                            node.x, node.y, node.width, node.height);
                                        return false;
                                    }.bind(this);
                                    $('#add-new-widget').click(this.addNewWidget);
                                };
                            });
                            // [ gridstack ] end
                        });
                    </script>

                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Gridstack css --&gt;
                    &lt;link href="assets/plugins/gridstack/css/gridstack.min.css" rel="stylesheet"&gt;
                    &lt;link href="assets/css/pages/gridstack.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Gridstack Js --&gt;
                    &lt;script src="assets/plugins/jquery-ui/js/jquery-ui.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/gridstack/js/lodash.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/gridstack/js/gridstack.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/gridstack/js/gridstack.jQueryUI.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-lightbox">LightBox</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5>Single Images</h5>
                            <hr>
                            <p> Use this code <code>data-toggle="lightbox"</code> to see image in lightbox popup. </p>
                            <div class="row text-center">
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l1.jpg" data-toggle="lightbox" data-title="Datta Image 1" data-footer="Datta Image 1"><img src="assets/images/light-box/sl1.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l2.jpg" data-toggle="lightbox" data-title="Datta Image 2" data-footer="Datta Image 2"><img src="assets/images/light-box/sl2.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l3.jpg" data-toggle="lightbox" data-title="Datta Image 3" data-footer="Datta Image 3"><img src="assets/images/light-box/sl3.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l4.jpg" data-toggle="lightbox" data-title="Datta Image 4" data-footer="Datta Image 4"><img src="assets/images/light-box/sl4.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l5.jpg" data-toggle="lightbox" data-title="Datta Image 5" data-footer="Datta Image 5"><img src="assets/images/light-box/sl5.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l6.jpg" data-toggle="lightbox" data-title="Datta Image 6" data-footer="Datta Image 6"><img src="assets/images/light-box/sl6.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <h5>Image Gallery</h5>
                            <hr>
                            <p> Add this code <code>data-gallery="example-gallery"</code> to see image gallery in lightbox popup. </p>
                            <div class="row text-center">
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l1.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="assets/images/light-box/sl1.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l2.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="assets/images/light-box/sl2.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l3.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="assets/images/light-box/sl3.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l4.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="assets/images/light-box/sl4.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l5.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="assets/images/light-box/sl5.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/l6.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="assets/images/light-box/sl6.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <h5>Video Gallery</h5>
                            <hr>
                            <p> Add this code <code>data-gallery="youtubevideos"</code> to see videos in lightbox popup. </p>
                            <div class="row  text-center">
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="http://www.youtube.com/embed/ZQ264Axbjxg" data-toggle="lightbox" data-gallery="youtubevideos"><img src="assets/images/light-box/v1.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="http://youtu.be/IkyZHPnfFnE" data-toggle="lightbox" data-gallery="youtubevideos"><img src="assets/images/light-box/v2.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="https://www.youtube.com/embed/oD-lmrfPECA" data-toggle="lightbox" data-gallery="youtubevideos"><img src="assets/images/light-box/v3.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <h5>Mixin Gallery</h5>
                            <hr>
                            <p> Add this code <code>data-gallery="mixedgallery"</code> to see mixed gallery in lightbox popup. to use vimeo add code <code>data-remote="vimeo url"</code></p>
                            <div class="row text-center">
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="https://www.youtube.com/watch?v=ilLU5vxhLYA" data-toggle="lightbox" data-gallery="mixedgallery"><img src="assets/images/light-box/v1.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="assets/images/light-box/mixin.jpg" data-toggle="lightbox" data-gallery="mixedgallery"><img src="assets/images/light-box/smixin.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                                <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                    <a href="http://vimeo.com/246066429" data-remote="http://player.vimeo.com/video/246066429" data-toggle="lightbox" data-gallery="mixedgallery"><img src="assets/images/light-box/v4.jpg" class="img-fluid m-b-10" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $(document).on('click', '[data-toggle="lightbox"]', function(event) {
                                event.preventDefault();
                                $(this).ekkoLightbox();
                            });
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Lightbox css --&gt;
                    &lt;link href="assets/plugins/ekko-lightbox/css/ekko-lightbox.min.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/lightbox2-master/css/lightbox.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Lightbox Js --&gt;
                    &lt;script src="assets/plugins/ekko-lightbox/js/ekko-lightbox.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/lightbox2-master/js/lightbox.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-notification">Notification</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5>Notification Alert</h5>
                            <hr>
                            <p>Notification color : <code> data-type="inverse"</code> Notification position : <code> data-align="left" </code></p>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-from="top" data-align="left" data-notify-icon="feather icon-bell">Top Left</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-from="top" data-align="right" data-notify-icon="feather icon-layers">Top Right</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-from="top" data-align="center" data-notify-icon="feather icon-shopping-cart">Top Center</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-from="bottom" data-align="left">Bottom Left</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-from="bottom" data-align="right">Bottom Right</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-from="bottom" data-align="center">Bottom Center</button>
                        </div>
                        <div class="card-block">
                            <h5>Notification Position</h5>
                            <hr>
                            <p>Change data-type : <code> data-type="inverse"</code> to change notification color</p>
                            <button class="btn notifications btn-inverse  " data-type="inverse" data-from="top" data-align="right" data-notify-icon="feather icon-bell">Inverse</button>
                            <button class="btn notifications btn-primary  " data-type="primary" data-from="top" data-align="right" data-notify-icon="feather icon-layers">Primary</button>
                            <button class="btn notifications btn-info " data-type="info" data-from="top" data-align="right" data-notify-icon="feather icon-shopping-cart">Info</button>
                            <button class="btn notifications btn-success  " data-type="success" data-from="top" data-align="right">success</button>
                            <button class="btn notifications btn-warning  " data-type="warning" data-from="top" data-align="right">Warning</button>
                            <button class="btn notifications btn-danger " data-type="danger" data-from="top" data-align="right">Danger</button>
                        </div>
                        <div class="card-block">
                            <h5>Notification Behaviour</h5>
                            <hr>
                            <p>use code <code>data-animation-in="animated fadeIn" data-animation-out="animated fadeOut"</code> notification animation effect</p>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated fadeIn" data-animation-out="animated fadeOut">Fade In</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated fadeInLeft" data-animation-out="animated fadeOutLeft">Fade In Left</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated fadeInRight" data-animation-out="animated fadeOutRight">Fade In Right</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated fadeInUp" data-animation-out="animated fadeOutUp">Fade In Up</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated fadeInDown" data-animation-out="animated fadeOutDown">Fade In Down</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated bounceIn" data-animation-out="animated bounceOut">Bounce In</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated bounceInLeft" data-animation-out="animated bounceOutLeft">Bounce In Left</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated bounceInRight" data-animation-out="animated bounceOutRight">Bounce In Right</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated rotateInDownRight" data-animation-out="animated rotateOutUpRight">Fall In Right</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated rotateIn" data-animation-out="animated rotateOut">Rotate In</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated flipInX" data-animation-out="animated flipOutX">Flip In X</button>
                            <button class="btn notifications btn-primary  " data-type="inverse" data-animation-in="animated flipInY" data-animation-out="animated flipOutY">Flip In Y</button>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            function notify(message, type) {
                                $.growl({
                                    message: message
                                }, {
                                    type: type,
                                    allow_dismiss: false,
                                    label: 'Cancel',
                                    className: 'btn-xs btn-inverse',
                                    placement: {
                                        from: 'bottom',
                                        align: 'right'
                                    },
                                    delay: 2500,
                                    animate: {
                                        enter: 'animated fadeInRight',
                                        exit: 'animated fadeOutRight'
                                    },
                                    offset: {
                                        x: 30,
                                        y: 30
                                    }
                                });
                            };
                            notify('Welcome to Notification page', 'inverse');
                        });

                        $(document).ready(function() {
                            function notify(from, align, icon, type, animIn, animOut) {
                                $.growl({
                                    icon: icon,
                                    title: ' Bootstrap Growl ',
                                    message: 'Turning standard Bootstrap alerts into awesome notifications',
                                    url: ''
                                }, {
                                    element: 'body',
                                    type: type,
                                    allow_dismiss: true,
                                    placement: {
                                        from: from,
                                        align: align
                                    },
                                    offset: {
                                        x: 30,
                                        y: 30
                                    },
                                    spacing: 10,
                                    z_index: 999999,
                                    delay: 2500,
                                    timer: 1000,
                                    url_target: '_blank',
                                    mouse_over: false,
                                    animate: {
                                        enter: animIn,
                                        exit: animOut
                                    },
                                    icon_type: 'class',
                                    template: '<div data-growl="container" class="alert" role="alert">' +
                                        '<button type="button" class="close" data-growl="dismiss">' +
                                        '<span aria-hidden="true">&times;</span>' +
                                        '<span class="sr-only">Close</span>' +
                                        '</button>' +
                                        '<span data-growl="icon"></span>' +
                                        '<span data-growl="title"></span>' +
                                        '<span data-growl="message"></span>' +
                                        '<a href="#!" data-growl="url"></a>' +
                                        '</div>'
                                });
                            };
                            $('.notifications.btn').on('click', function(e) {
                                e.preventDefault();
                                var nFrom = $(this).attr('data-from');
                                var nAlign = $(this).attr('data-align');
                                var nIcons = $(this).attr('data-notify-icon');
                                var nType = $(this).attr('data-type');
                                var nAnimIn = $(this).attr('data-animation-in');
                                var nAnimOut = $(this).attr('data-animation-out');
                                notify(nFrom, nAlign, nIcons, nType, nAnimIn, nAnimOut);
                            });
                        });
                    </script>

                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Notification css --&gt;
                    &lt;link href="assets/plugins/notification/css/notification.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Notification Js --&gt;
                    &lt;script src="assets/plugins/notification/js/bootstrap-growl.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-pnotify">Pnotify</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-block">
                            <h5>Notification Alert</h5>
                            <hr>
                            <div class="table-responsive">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td>Primary Notice</td>
                                            <td>
                                                <button type="button" class="btn btn-default btn-sm" id="pnotify-default"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-default</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Primary Notice</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-primary"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-default</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Success Notice</td>
                                            <td>
                                                <button type="button" class="btn btn-success btn-sm" id="pnotify-success"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-success</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Info Notice</td>
                                            <td>
                                                <button type="button" class="btn btn-info btn-sm" id="pnotify-info"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-info</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Danger Notice</td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm" id="pnotify-danger"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-danger</code> to use this style notification</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-block">
                            <h5>Desktop Notifications</h5>
                            <hr>
                            <div class="table-responsive">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td>Success Notification</td>
                                            <td>
                                                <button type="button" class="btn btn-success btn-sm" id="pnotify-desktop-success"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-desktop-success</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Info Notification</td>
                                            <td>
                                                <button type="button" class="btn btn-info btn-sm" id="pnotify-desktop-info"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-desktop-info</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Warning Notification</td>
                                            <td>
                                                <button type="button" class="btn btn-warning btn-sm" id="pnotify-desktop-warning"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-desktop-warning</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Danger Notification</td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm" id="pnotify-desktop-danger"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-desktop-danger</code> to use this style notification</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-block">
                            <h5>Notification Position</h5>
                            <hr>
                            <div class="table-responsive">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td>Top Left</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-stack-top-left"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-stack-top-left</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Bottom Left</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-stack-bottom-left"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-stack-bottom-left</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Bottom Right</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-stack-bottom-right"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-stack-bottom-right</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Custom Left</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-stack-custom-left"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-stack-custom-left</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Custom Right</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-stack-custom-right"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-stack-custom-right</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Custom Top</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-stack-custom-top"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-stack-custom-top</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Custom Bottom</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-stack-custom-bottom"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-stack-custom-bottom</code> to use this style notification</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-block">
                            <h5>Notification Option</h5>
                            <hr>
                            <div class="table-responsive">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td>No Title</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-no-title"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-no-title</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Rich Title</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-rich"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-rich</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Click to Close</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-click"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-click</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Custom Button</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-buttons"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-buttons</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Callback Button</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-callbacks"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-callbacks</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Progress Button</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-progress"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-progress</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Dynamic Progress Button</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-dynamic"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-dynamic</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Multiline Button</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-multiline"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-multiline</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Prompt Button</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-prompt"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-prompt</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Confirm Button</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-confirm"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-confirm</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Stickey Button</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-sticky"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-sticky</code> to use this style notification</td>
                                        </tr>
                                        <tr>
                                            <td>Permenant Button</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" id="pnotify-permanent-buttons"><i class="feather icon-bell"></i> Click here!</button>
                                            </td>
                                            <td>Use id <code>pnotify-permanent-buttons</code> to use this style notification</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Pnotify css --&gt;
                    &lt;link href="assets/plugins/pnotify/css/pnotify.custom.min.css" rel="stylesheet"&gt;
                    &lt;link href="assets/css/pages/pnotify.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Pnotify Js --&gt;
                    &lt;script src="assets/plugins/pnotify/js/pnotify.custom.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/pnotify/js/notify-event.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-rating">Rating</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="text-center">
                        <button class="btn btn-primary rating-enable mb-4">Enable</button>
                        <button class="btn btn-primary rating-disable mb-4">disable</button>
                    </div>
                    <div class="card">
                        <div class="row">
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card-block">
                                    <h5>1/10 Rating</h5>
                                    <hr>
                                    <p>Use <code>id="example-1to10"</code> to see default rating</p>
                                    <div class="box-body">
                                        <select id="example-1to10" name="rating" autocomplete="off">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7" selected="selected">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select>
                                        <span class="current-rating"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card-block">
                                    <h5>Movie Rating</h5>
                                    <hr>
                                    <p>Use <code>id="example-movie"</code> to see movie rating</p>
                                    <div class="box-body">
                                        <select id="example-movie" name="rating" autocomplete="off">
                                            <option value="Bad">Bad</option>
                                            <option value="Mediocre">Mediocre</option>
                                            <option value="Good" selected="selected">Good</option>
                                            <option value="Awesome">Awesome</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card-block">
                                    <h5>Square Rating</h5>
                                    <hr>
                                    <p>Use <code>id="example-square"</code> to see square rating</p>
                                    <div class="box-body">
                                        <select id="example-square" name="rating" autocomplete="off">
                                            <option value="" label="0"></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card-block">
                                    <h5>Pill Rating</h5>
                                    <hr>
                                    <p>Use <code>id="example-pill"</code> to see pill rating</p>
                                    <div class="box-body">
                                        <select id="example-pill" name="rating" autocomplete="off">
                                            <option value="A">A</option>
                                            <option value="B">B</option>
                                            <option value="C">C</option>
                                            <option value="D">D</option>
                                            <option value="E">E</option>
                                            <option value="F">F</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card-block">
                                    <h5>Reverse Rating</h5>
                                    <hr>
                                    <p>Use <code>id="example-reversed"</code> to see reverse rating</p>
                                    <div class="box-body">
                                        <select id="example-reversed" name="rating" autocomplete="off">
                                            <option value="Strongly Agree">Strongly Agree</option>
                                            <option value="Agree">Agree</option>
                                            <option value="Neither Agree or Disagree" selected="selected">Neither Agree or Disagree</option>
                                            <option value="Disagree">Disagree</option>
                                            <option value="Strongly Disagree">Strongly Disagree</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card-block">
                                    <h5>Horizontal Rating</h5>
                                    <hr>
                                    <p>Use <code>id="example-horizontal"</code> to see horizontal rating</p>
                                    <div class="box-body">
                                        <select id="example-horizontal" name="rating" autocomplete="off">
                                            <option value="10">10</option>
                                            <option value="9">9</option>
                                            <option value="8">8</option>
                                            <option value="7">7</option>
                                            <option value="6">6</option>
                                            <option value="5">5</option>
                                            <option value="4">4</option>
                                            <option value="3">3</option>
                                            <option value="2">2</option>
                                            <option value="1" selected="selected">1</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card-block">
                                    <h5>Font Awesome Rating</h5>
                                    <hr>
                                    <p>Use <code>id="example-fontawesome"</code> to see font awesome rating</p>
                                    <div class="stars stars-example-fontawesome">
                                        <select id="example-fontawesome" name="rating" autocomplete="off">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card-block">
                                    <h5>CSS Stars Rating</h5>
                                    <hr>
                                    <p>Use <code>id="example-css"</code> to see css stars rating</p>
                                    <div class="stars stars-example-css">
                                        <select id="example-css" class="rating-star" name="rating" autocomplete="off">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="card-block">
                                    <h5>Fractional Star Rating</h5>
                                    <hr>
                                    <p>Use <code>id="example-fontawesome-o"</code> to see fractional star rating</p>
                                    <div class="stars stars-example-fontawesome-o">
                                        <select id="example-fontawesome-o" name="rating" data-current-rating="5.6" autocomplete="off">
                                            <option value="" label="0"></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select>
                                        <span class="title current-rating">Current rating: <span class="value"></span></span>
                                        <span class="title your-rating hidden">Your rating: <span class="value"></span>&nbsp;<a href="#!" class="clear-rating"><i class="icofont icofont-close-circled"></i></a></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).ready(function() {
                            function ratingEnable() {
                                $('#example-1to10').barrating('show', {
                                    theme: 'bars-1to10',
                                });
                                $('#example-movie').barrating('show', {
                                    theme: 'bars-movie'
                                });
                                $('#example-movie').barrating('set', 'Mediocre');
                                $('#example-square').barrating('show', {
                                    theme: 'bars-square',
                                    showValues: true,
                                    showSelectedRating: false
                                });
                                $('#example-pill').barrating('show', {
                                    theme: 'bars-pill',
                                    initialRating: 'A',
                                    showValues: true,
                                    showSelectedRating: false,
                                    allowEmpty: true,
                                    emptyValue: '-- no rating selected --',
                                    onSelect: function(value, text) {
                                        alert('Selected rating: ' + value);
                                    }
                                });
                                $('#example-reversed').barrating('show', {
                                    theme: 'bars-reversed',
                                    showSelectedRating: true,
                                    reverse: true
                                });
                                $('#example-horizontal').barrating('show', {
                                    theme: 'bars-horizontal',
                                    reverse: true,
                                    hoverState: false
                                });
                                $('#example-fontawesome').barrating({
                                    theme: 'fontawesome-stars',
                                    showSelectedRating: false
                                });
                                $('.rating-star').barrating({
                                    theme: 'css-stars',
                                    showSelectedRating: false
                                });
                                $('#example-bootstrap').barrating({
                                    theme: 'bootstrap-stars',
                                    showSelectedRating: false
                                });
                                var currentRating = $('#example-fontawesome-o').data('current-rating');
                                $('.stars-example-fontawesome-o .current-rating')
                                    .find('span')
                                    .html(currentRating);
                                $('.stars-example-fontawesome-o .clear-rating').on('click', function(event) {
                                    event.preventDefault();
                                    $('#example-fontawesome-o')
                                        .barrating('clear');
                                });
                                $('#example-fontawesome-o').barrating({
                                    theme: 'fontawesome-stars-o',
                                    showSelectedRating: false,
                                    initialRating: currentRating,
                                    onSelect: function(value, text) {
                                        if (!value) {
                                            $('#example-fontawesome-o')
                                                .barrating('clear');
                                        } else {
                                            $('.stars-example-fontawesome-o .current-rating')
                                                .addClass('hidden');

                                            $('.stars-example-fontawesome-o .your-rating')
                                                .removeClass('hidden')
                                                .find('span')
                                                .html(value);
                                        }
                                    },
                                    onClear: function(value, text) {
                                        $('.stars-example-fontawesome-o')
                                            .find('.current-rating')
                                            .removeClass('hidden')
                                            .end()
                                            .find('.your-rating')
                                            .addClass('hidden');
                                    }
                                });
                            }

                            function ratingDisable() {
                                $('select').barrating('destroy');
                            }
                            $('.rating-enable').on('click', function(event) {
                                event.preventDefault();
                                ratingEnable();
                                $(this).addClass('deactivated');
                                $('.rating-disable').removeClass('deactivated');
                            });
                            $('.rating-disable').on('click', function(event) {
                                event.preventDefault();
                                ratingDisable();
                                $(this).addClass('deactivated');
                                $('.rating-enable').removeClass('deactivated');
                            });
                            ratingEnable();
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Rating css --&gt;
                    &lt;link href="assets/plugins/ratting/css/bars-1to10.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/ratting/css/bars-horizontal.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/ratting/css/bars-movie.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/ratting/css/bars-pill.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/ratting/css/bars-reversed.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/ratting/css/bars-square.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/ratting/css/bootstrap-stars.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/ratting/css/css-stars.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/ratting/css/fontawesome-stars.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/ratting/css/fontawesome-stars-o.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Rating Js --&gt;
                    &lt;script src="assets/plugins/ratting/js/jquery.barrating.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-range">Range Slider</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="row">
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Basic example with custom formatter and colored selected region via CSS.</h6>
                                    <hr>
                                    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Range selector, options specified via data attribute.</h6>
                                    <hr> Filter by price interval: <b>€ 10</b>
                                    <input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]" /> <b>€ 1000</b>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Sliders can be enabled and disabled.</h6>
                                    <hr>
                                    <input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false" />
                                    <input id="ex7-enabled" type="checkbox" /> Enabled
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent shapes for the handles.</h6>
                                    <hr>
                                    <p><b>R</b>
                                        <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" id="R" data-slider-tooltip="hide" data-slider-handle="square" />
                                    </p>
                                    <p><b>G</b>
                                        <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" />
                                    </p>
                                    <p><b>B</b>
                                        <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" />
                                    </p>
                                    <div id="RGB"></div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Vertical Slider with reversed values (largest to smallest).</h6>
                                    <hr>
                                    <input id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Unusual tooltip positions</h6>
                                    <hr>
                                    <input id="ex17a" type="text" />
                                    <input id="ex17b" type="text" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Destroy instance of slider by calling destroy() method on slider instance via JavaScript.</h6>
                                    <hr>
                                    <input id="ex5" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="0" />
                                    <button id="destroyEx5Slider" class='btn btn-danger'>Click to Destroy</button>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.</h6>
                                    <hr>
                                    <input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3" />
                                    <span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Tooltip can always be displayed.</h6>
                                    <hr>
                                    <input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Precision (number of places after the decimal) can be specified.</h6>
                                    <hr>
                                    <input id="ex9" type="text" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Setting custom handlers.</h6>
                                    <hr>
                                    <input id="ex10" type="text" data-slider-handle="custom" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Using a custom step interval.</h6>
                                    <hr>
                                    <input id="ex11" type="text" data-slider-handle="custom" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Coloring the low and high track segments.</h6>
                                    <hr>
                                    <input id="ex12a" type="text" />
                                    <br /> Note that there is no low track on the single-value slider. The area to lesser than the value of the handle is the selection.
                                    <br>
                                    <input id="ex12b" type="text" />
                                    <br />
                                    <input id="ex12c" type="text" />
                                    <br />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Using tick marks and labels.</h6>
                                    <hr>
                                    <input id="ex13" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]' />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Using tick marks at specific positions.</h6>
                                    <hr>
                                    <input id="ex14" type="text" data-slider-ticks="[0, 10, 20, 30, 40]" data-slider-ticks-snap-bounds="95" data-slider-ticks-labels='["$0", "$10", "$20", "$30", "$40"]' data-ticks_positions="[0, 30, 60, 70, 90, 100]">
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>With a logarithmic scale.</h6>
                                    <hr>
                                    <input id="ex15" type="text" data-slider-min="1000" data-slider-max="10000000" data-slider-step="5" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Focus the slider handle after a value change.</h6>
                                    <hr>
                                    <input id="ex16a" type="text" />
                                    <br />
                                    <input id="ex16b" type="text" />
                                    <br />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Accessibility with ARIA labels</h6>
                                    <hr>
                                    <span id="ex18-label-1" class="hidden">Example slider label</span>
                                    <input id="ex18a" type="text" />
                                    <span id="ex18-label-2a" class="hidden">Example low value</span>
                                    <span id="ex18-label-2b" class="hidden">Example high value</span>
                                    <input id="ex18b" type="text" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Auto-Register data-provide="slider" Elements</h6>
                                    <hr>
                                    <span id="ex19-label-1" class="hidden">Example slider label</span>
                                    <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-min="1" data-slider-max="3" data-slider-step="1"
                                        data-slider-value="3" data-slider-tooltip="hide" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Slider-Elements initially hidden</h6>
                                    <hr>
                                    <div class="well" style="display: none">
                                        <span id="ex20-label-1" class="hidden">Example slider label</span>
                                        <input id="ex20" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-min="1" data-slider-max="3" data-slider-step="1"
                                            data-slider-value="3" data-slider-tooltip="hide" />
                                    </div>
                                    <a class="btn btn-primary" href="#!" id="ex20a">Show</a>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Create an input element wth the data-provide="slider" attribute automatically turns it into a slider. Options can be supplied via data-slider- attributes.</h6>
                                    <hr>
                                    <input id="ex21" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-min="1" data-slider-max="3" data-slider-step="1"
                                        data-slider-value="3" data-slider-tooltip="hide" />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Highlight ranges on slider with rangeHighlights attribute 14</h6>
                                    <hr>
                                    <input id="ex22" type="text" data-slider-id="slider22" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
                                       { "start": 7, "end": 8, "class": "category2" },
                                       { "start": 17, "end": 19 },
                                       { "start": 17, "end": 24 }, //not visible -  out of slider range
                                       { "start": -3, "end": 19 }]' />
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="card-block">
                                    <h6>Using tick marks at specific positions..</h6>
                                    <hr>
                                    <input id="ex23" type="text" data-slider-ticks="[0, 1, 2, 3, 4]" data-slider-step="0.01" data-slider-ticks-snap-bounds="200" data-slider-ticks-tooltip="true" data-ticks_positions="[0, 30, 60, 70, 90, 100]">
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            // [ basic-Slider ]
                            var slider = new Slider('#ex1', {
                                formatter: function(value) {
                                    return 'Current value: ' + value;
                                }
                            });

                            // [ Selector-Slider ]
                            var slider = new Slider('#ex2', {});
                            var RGBChange = function() {
                                $('#RGB').css('background', 'rgb(' + r.getValue() + ',' + g.getValue() + ',' + b.getValue() + ')')
                            };

                            // [  Handles-Slider ]
                            var r = new Slider("#R", {
                                reversed: true
                            }).on('slide', RGBChange);
                            var g = new Slider("#G", {
                                reversed: true
                            }).on('slide', RGBChange);
                            var b = new Slider("#B", {
                                reversed: true
                            }).on('slide', RGBChange);

                            // [ vertical-slider ]
                            var slider = new Slider("#ex4", {
                                reversed: true
                            });

                            // [ Destroy-Slider ]
                            var slider = new Slider('#ex5');
                            $("#destroyEx5Slider").click(function() {
                                slider.destroy();
                            });

                            // [ current-Slider ]
                            var slider = new Slider("#ex6");
                            slider.on("slide", function(sliderValue) {
                                document.getElementById("ex6SliderVal").textContent = sliderValue;
                            });

                            // [ Enable-Slider ]
                            var slider = new Slider("#ex7");
                            $("#ex7-enabled").click(function() {
                                if (this.checked) {
                                    slider.enable();
                                } else {
                                    slider.disable();
                                }
                            });

                            // [ Tooltip-Slider ]
                            var slider = new Slider("#ex8", {
                                tooltip: 'always'
                            });

                            // [ Precision-slider ]
                            var slider = new Slider("#ex9", {
                                precision: 2,
                                value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
                            });

                            // [ handlers-slider ]
                            var slider = new Slider("#ex10", {});

                            // [ step-slider ]
                            var slider = new Slider("#ex11", {
                                step: 20000,
                                min: 0,
                                max: 200000
                            });

                            //[ low & high-slider ]
                            var sliderA = new Slider("#ex12a", {
                                id: "slider12a",
                                min: 0,
                                max: 10,
                                value: 5
                            });
                            var sliderB = new Slider("#ex12b", {
                                id: "slider12b",
                                min: 0,
                                max: 10,
                                range: true,
                                value: [3, 7]
                            });
                            var sliderC = new Slider("#ex12c", {
                                id: "slider12c",
                                min: 0,
                                max: 10,
                                range: true,
                                value: [3, 7]
                            });

                            // [ labels-slider ]
                            var slider = new Slider("#ex13", {
                                ticks: [0, 10, 20, 30, 40],
                                ticks_labels: ['$0', '$10', '$20', '$30', '$40'],
                                ticks_snap_bounds: 95
                            });

                            // [ positions-slider ]
                            var slider = new Slider("#ex14", {
                                ticks: [0, 10, 20, 30, 40],
                                ticks_positions: [0, 30, 60, 70, 90, 100],
                                ticks_labels: ['$0', '$10', '$20', '$30', '$40'],
                                ticks_snap_bounds: 95
                            });

                            // [ logarithmic-slider ]
                            var slider = new Slider('#ex15', {
                                min: 1000,
                                max: 10000000,
                                scale: 'logarithmic',
                                step: 10
                            });

                            // [ Focus-slider ]
                            var sliderA = new Slider("#ex16a", {
                                min: 0,
                                max: 10,
                                value: 0,
                                focus: true
                            });
                            var sliderB = new Slider("#ex16b", {
                                min: 0,
                                max: 10,
                                value: [0, 10],
                                focus: true
                            });

                            // [ Unusual-slider ]
                            var sliderA = new Slider("#ex17a", {
                                min: 0,
                                max: 10,
                                value: 0,
                                tooltip_position: 'bottom'
                            });
                            var sliderB = new Slider("#ex17b", {
                                min: 0,
                                max: 10,
                                value: 0,
                                orientation: 'vertical',
                                tooltip_position: 'left'
                            });

                            // [ Accessibility-slider ]
                            var sliderA = new Slider("#ex18a", {
                                min: 0,
                                max: 10,
                                value: 5,
                                labelledby: 'ex18-label-1'
                            });
                            var sliderB = new Slider("#ex18b", {
                                min: 0,
                                max: 10,
                                value: [3, 6],
                                labelledby: ['ex18-label-2a', 'ex18-label-2b']
                            });

                            // [ Hidden-slider ]
                            $('#ex20a').on('click', function(e) {
                                $('#ex20a')
                                    .parent()
                                    .find(' >.well')
                                    .toggle()
                                    .find('input')
                                    .slider('relayout');
                                e.preventDefault();
                            });

                            // [ Highlight-slider ]
                            var slider = new Slider("#ex22", {
                                id: 'slider22',
                                min: 0,
                                max: 20,
                                step: 1,
                                value: 14,
                                rangeHighlights: [{
                                    "start": 2,
                                    "end": 5,
                                    "class": "category1"
                                }, {
                                    "start": 7,
                                    "end": 8,
                                    "class": "category2"
                                }, {
                                    "start": 17,
                                    "end": 19
                                }, {
                                    "start": 17,
                                    "end": 24
                                }, {
                                    "start": -3,
                                    "end": 19
                                }]
                            });

                            // [ Tick-slider ]
                            var slider = new Slider("#ex23", {
                                ticks: [0, 1, 2, 3, 4],
                                ticks_positions: [0, 30, 70, 90, 100],
                                ticks_snap_bounds: 200,
                                formatter: function(value) {
                                    return 'Current value: ' + value;
                                },
                                ticks_tooltip: true,
                                step: 0.01
                            });
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Range Slider css --&gt;
                    &lt;link href="assets/plugins/range-slider/css/bootstrap-slider.min.css" rel="stylesheet"&gt;
                    &lt;link href="assets/css/pages/rangeslider.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Range Slider Js --&gt;
                    &lt;script src="assets/plugins/range-slider/js/bootstrap-slider.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-slider">Slider</h2>
            <div class="row">
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Slider1</h5>
                        </div>
                        <div class="card-block">
                            <div class="slider1 owl-carousel owl-theme">
                                <div class="item">
                                    <img src="assets/images/slider/img-slide-1.jpg" alt="" class="img-fluid">
                                </div>
                                <div class="item">
                                    <img src="assets/images/slider/img-slide-2.jpg" alt="" class="img-fluid">
                                </div>
                                <div class="item">
                                    <img src="assets/images/slider/img-slide-3.jpg" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            setTimeout(function() {
                                $('.slider1').owlCarousel({
                                    items: 1,
                                    nav: true,
                                    dots: true,
                                });
                                $(".slider1 .owl-prev").html('Prev');
                                $(".slider1 .owl-next").html('Next');
                            }, 500);
                        });
                    </script>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Only Nav</h5>
                        </div>
                        <div class="card-block">
                            <div class="slider2 owl-carousel owl-theme">
                                <div class="item">
                                    <img src="assets/images/slider/img-slide-1.jpg" alt="" class="img-fluid">
                                </div>
                                <div class="item">
                                    <img src="assets/images/slider/img-slide-2.jpg" alt="" class="img-fluid">
                                </div>
                                <div class="item">
                                    <img src="assets/images/slider/img-slide-3.jpg" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            setTimeout(function() {
                                $('.slider2').owlCarousel({
                                    items: 1,
                                    nav: true,
                                    dots: false,
                                });
                                $(".slider2 .owl-prev").html('<i class="feather icon-chevron-left"></i>');
                                $(".slider2 .owl-next").html('<i class="feather icon-chevron-right"></i>');
                            }, 500);
                        });
                    </script>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Only Dots</h5>
                        </div>
                        <div class="card-block">
                            <div class="slider3 owl-carousel owl-theme">
                                <div class="item">
                                    <img src="assets/images/slider/img-slide-1.jpg" alt="" class="img-fluid">
                                </div>
                                <div class="item">
                                    <img src="assets/images/slider/img-slide-2.jpg" alt="" class="img-fluid">
                                </div>
                                <div class="item">
                                    <img src="assets/images/slider/img-slide-3.jpg" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            setTimeout(function() {
                                $('.slider3').owlCarousel({
                                    items: 1,
                                    nav: false,
                                    dots: true,
                                });
                            }, 500);
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- owlcarousel css --&gt;
                    &lt;link href="assets/plugins/owl-carousel/css/owl.carousel.min.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/owl-carousel/css/owl.theme.default.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- owlcarousel Js --&gt;
                    &lt;script src="assets/plugins/owl-carousel/js/owl.carousel.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-highlighter">Syntax Highlighter</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Usage</h5>
                        </div>
                        <div class="card-block">
                            <p>The recommended way to mark up a code block (both for semantics and for Prism) is a <code>&lt;pre&gt;</code> element with a element <code>&lt;code&gt;</code> inside, like so:</p>
                            <h6 class="m-t-20 f-w-600">Code:</h6>
                            <pre>
                                <code class="language-markup">
                                    &lt;pre&gt;
                                        &lt;code class="language-css"&gt;
                                            p {
                                                color: #1abc9c
                                            }
                                        &lt;/code&gt;
                                    &lt;/pre&gt;
                                </code>
                            </pre>
                            <h6 class="m-t-20 f-w-600">Output:</h6>
                            <div class="bg-light syntax-output p-2">
                                <pre class="mb-0">
p {
color: #1abc9c
}</pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>HTML Markup</h5>
                        </div>
                        <div class="card-block">
                            <p>Use the following code to use HTML syntax highlighter.</p>
                            <h6 class="m-t-20 f-w-600">Usage:</h6>
                            <pre>
                                <code class="language-markup">
                                    &lt;pre&gt;
                                        &lt;code class="language-markup"&gt;
                                            HTML CODE ...
                                        &lt;/code&gt;
                                    &lt;/pre&gt;
                                </code>
                            </pre>
                            <h6 class="m-t-20 f-w-600">Example:</h6>
                            <pre>
                                <code class="language-markup">
                                    &lt;div class="card"&gt;
                                        &lt;div class="card-header"&gt;
                                            &lt;h5&gt;Hello card&lt;/h5&gt;
                                            &lt;span&gt; lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/span&gt;
                                            &lt;div class="card-header-right"&gt;
                                                &lt;i class="icofont icofont-rounded-down"&gt;&lt;/i&gt;
                                                &lt;i class="icofont icofont-refresh"&gt;&lt;/i&gt;
                                                &lt;i class="icofont icofont-close-circled"&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class="card-block"&gt;
                                            &lt;p&gt;
                                                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                                            &lt;/p&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                </code>
                            </pre>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>CSS Markup</h5>
                        </div>
                        <div class="card-block">
                            <p>Use the following code to use HTML syntax highlighter.</p>
                            <h6 class="m-t-20 f-w-600">Usage:</h6>
                            <pre>
                                <code class="language-markup">
                                    &lt;pre&gt;
                                        &lt;code class="language-css"&gt;
                                            CSS CODE ...
                                        &lt;/code&gt;
                                    &lt;/pre&gt;
                                </code>
                            </pre>
                            <h6 class="m-t-20 f-w-600">Example:</h6>
                            <pre>
                                <code class="language-css">
                                    a:active{
                                        color:#1abc9c;
                                    }
                                    p{
                                        font-size:13px;
                                    }
                                    .btn-primary{
                                        color: #1abc9c;
                                        background-color: #fff;
                                    }
                                    .label-primary {
                                        background-color: #1abc9c;
                                    }
                                    .badge-primary {
                                        background-color: #1abc9c;
                                    }
                                    .bg-primary {
                                        background-color: #1abc9c !important;
                                        color: #fff;
                                    }
                                    .panel-primary {
                                        border-color: #1abc9c;
                                    }
                                </code>
                            </pre>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line Number</h5>
                        </div>
                        <div class="card-block">
                            <p>Line number at the beginning of code lines.</p>
                            <p>Obviously, this is supposed to work only for code blocks (<code>&lt;pre&gt;&lt;code&gt;</code>) and not for inline code. Add class line-numbers to your desired <code>&lt;pre&gt;</code> and line-numbers plugin will take
                                care.</p>
                            <p>Optional: You can specify the data-start (Number) attribute on the <code>&lt;pre&gt;</code> element. It will shift the line counter.</p>
                            <h6 class="m-t-20 f-w-600">Usage:</h6>
                            <pre class="line-numbers language-js">
                                <code class=" language-js">
                                    &lt;pre class="line-numbers"&gt;
                                        &lt;code class="language-css"&gt;
                                            p {
                                                color: red;
                                            }

                                        &lt;/code&gt;
                                    &lt;/pre&gt;
                                </code>
                            </pre>
                            <h6 class="m-t-20 f-w-600">Example:</h6>
                            <pre class="line-numbers">
                                <code class="language-js">
                                    (function() {
                                        if (typeof self==='undefined' || !self.Prism || !self.document) {
                                            return;
                                        }
                                    });
                                </code>
                            </pre>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line Highlight</h5>
                        </div>
                        <div class="card-block">
                            <p>Highlights specific lines and/or line ranges.</p>
                            <p>You specify the lines to be highlighted through the data-line attribute on the <code>&lt;pre&gt;</code> element, in the following simple format:</p>
                            <ol>
                                <li>A single number refers to the line with that number</li>
                                <li>Ranges are denoted by two numbers, separated with a hyphen (-)</li>
                                <li>Multiple line numbers or ranges are separated by commas.</li>
                                <li>Whitespace is allowed anywhere and will be stripped off.</li>
                            </ol>
                            <h6 class="m-t-20 f-w-600">Usage:</h6>
                            <pre>
                                <code class="language-markup">
                                    &lt;pre data-line="2,4, 8-10"&gt;
                                        &lt;code class="language-css"&gt;
                                            p {
                                                color: red
                                            }
                                        &lt;/code&gt;
                                    &lt;/pre&gt;
                                </code>
                            </pre>
                            <h6 class="m-t-20 f-w-600">Example:</h6>
                            <pre data-line="2,4,7-9">
                                <code class="language-css">
                                    pre.line-numbers {
                                        position: relative;
                                        padding-left: 3.8em;
                                        counter-reset: linenumber;
                                    }

                                    pre.line-numbers > code {
                                        position: relative;
                                    }

                                    .line-numbers .line-numbers-rows {
                                        position: absolute;
                                        pointer-events: none;
                                        top: 0;
                                        font-size: 100%;
                                        left: -3.8em;
                                        width: 3em;
                                        /* works for line-numbers below 1000 lines */
                                        letter-spacing: -1px;
                                        border-right: 1px solid #999;
                                        -webkit-user-select: none;
                                        -moz-user-select: none;
                                        -ms-user-select: none;
                                        user-select: none;
                                    }
                                </code>
                            </pre>
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Prism css --&gt;
                    &lt;link href="assets/plugins/prism/css/prism.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Prism Js --&gt;
                    &lt;script src="assets/plugins/prism/js/prism.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-view">Tree View</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card-block">
                                    <h5>HTML Demo</h5>
                                    <hr>
                                    <div id="html" class="demo">
                                        <ul>
                                            <li data-jstree='{ "opened" : true }'>Root node
                                                <ul>
                                                    <li data-jstree='{ "selected" : true }'>Child node 1</li>
                                                    <li>Child node 2</li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card-block">
                                    <h5>Data Format Demo</h5>
                                    <hr>
                                    <div id="frmt" class="demo"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card-block">
                                    <h5>Callback Function Data Demo</h5>
                                    <hr>
                                    <div id="clbk" class="demo"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card-block">
                                    <h5>Inline Data Demo</h5>
                                    <hr>
                                    <div id="data" class="demo"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card-block">
                                    <h5>AJAX Demo</h5>
                                    <hr>
                                    <div id="ajax" class="demo"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card-block">
                                    <h5>Lazy Loading Demo</h5>
                                    <hr>
                                    <div id="lazy" class="demo"></div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="card-block">
                                    <h5>Interaction and Events Demo</h5>
                                    <hr>
                                    <button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>
                                    <div id="evts" class="demo"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            // [ html-demo ]
                            $('#html').jstree();

                            // [ format-demo ]
                            $('#frmt').jstree({
                                'core': {
                                    'data': [{
                                        "text": "Root node",
                                        "state": {
                                            "opened": true
                                        },
                                        "children": [{
                                            "text": "Child node 1",
                                            "state": {
                                                "selected": true
                                            },
                                            "icon": "jstree-file"
                                        }, {
                                            "text": "Child node 2",
                                            "state": {
                                                "disabled": true
                                            }
                                        }]
                                    }]
                                }
                            });
                            // [ Callback-demo ]
                            $('#clbk').jstree({
                                'core': {
                                    'data': function(node, cb) {
                                        if (node.id === "#") {
                                            cb([{
                                                "text": "Root",
                                                "id": "1",
                                                "children": true
                                            }]);
                                        } else {
                                            cb(["Child"]);
                                        }
                                    }
                                }
                            });
                            // [ Inline-demo ]
                            $('#data').jstree({
                                'core': {
                                    'data': [{
                                        "text": "Root node",
                                        "children": [{
                                            "text": "Child node 1"
                                        }, {
                                            "text": "Child node 2"
                                        }]
                                    }]
                                }
                            });
                            // [ AJAX-demo ]
                            $('#ajax').jstree({
                                'core': {
                                    'data': {
                                        "url": "assets/plugins/jstree/json/root.json",
                                        "dataType": "json" // needed only if you do not supply JSON headers
                                    }
                                }
                            });
                            // [ Lazy-demo ]
                            $('#lazy').jstree({
                                'core': {
                                    'data': {
                                        "url": "assets/plugins/jstree/json/lazy.json",
                                        "data": function(node) {
                                            return {
                                                "id": node.id
                                            };
                                        }
                                    }
                                }
                            });
                            $('#evts_button').on("click", function() {
                                var instance = $('#evts').jstree(true);
                                instance.deselect_all();
                                instance.select_node('1');
                            });
                            $('#evts')
                                .on("changed.jstree", function(e, data) {
                                    if (data.selected.length) {
                                        alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
                                    }
                                })
                                .jstree({
                                    'core': {
                                        'multiple': false,
                                        'data': [{
                                            "text": "Root node",
                                            "children": [{
                                                "text": "Child node 1",
                                                "id": 1
                                            }, {
                                                "text": "Child node 2"
                                            }]
                                        }]
                                    }
                                });
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Jstree css --&gt;
                    &lt;link href="assets/plugins/jstree/css/style.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Jstree Js --&gt;
                    &lt;script src="assets/plugins/jstree/js/jstree.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-nestable">Nestable</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Nestable</h5>
                        </div>
                        <div class="card-block">
                            <nav id="nestable-menu">
                                <button class="btn btn-primary m-b-10 m-r-10" type="button" data-action="expand-all">Expand All</button>
                                <button class="btn btn-secondary m-b-10" type="button" data-action="collapse-all">Collapse All</button>
                            </nav>
                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="cf nestable-lists">
                                        <div class="dd" id="nestable">
                                            <ol class="dd-list">
                                                <li class="dd-item" data-id="1">
                                                    <div class="dd-handle">Item 1</div>
                                                </li>
                                                <li class="dd-item" data-id="2">
                                                    <div class="dd-handle">Item 2</div>
                                                    <ol class="dd-list">
                                                        <li class="dd-item" data-id="3">
                                                            <div class="dd-handle">Item 3</div>
                                                        </li>
                                                        <li class="dd-item" data-id="4">
                                                            <div class="dd-handle">Item 4</div>
                                                        </li>
                                                        <li class="dd-item" data-id="5">
                                                            <div class="dd-handle">Item 5</div>
                                                            <ol class="dd-list">
                                                                <li class="dd-item" data-id="6">
                                                                    <div class="dd-handle">Item 6</div>
                                                                </li>
                                                                <li class="dd-item" data-id="7">
                                                                    <div class="dd-handle">Item 7</div>
                                                                </li>
                                                                <li class="dd-item" data-id="8">
                                                                    <div class="dd-handle">Item 8</div>
                                                                </li>
                                                            </ol>
                                                        </li>
                                                        <li class="dd-item" data-id="9">
                                                            <div class="dd-handle">Item 9</div>
                                                        </li>
                                                        <li class="dd-item" data-id="10">
                                                            <div class="dd-handle">Item 10</div>
                                                        </li>
                                                    </ol>
                                                </li>
                                                <li class="dd-item" data-id="11">
                                                    <div class="dd-handle">Item 11</div>
                                                </li>
                                                <li class="dd-item" data-id="12">
                                                    <div class="dd-handle">Item 12</div>
                                                </li>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="cf nestable-lists">
                                        <div class="dd" id="nestable2">
                                            <ol class="dd-list">
                                                <li class="dd-item" data-id="13">
                                                    <div class="dd-handle">Item 13</div>
                                                </li>
                                                <li class="dd-item" data-id="14">
                                                    <div class="dd-handle">Item 14</div>
                                                </li>
                                                <li class="dd-item" data-id="15">
                                                    <div class="dd-handle">Item 15</div>
                                                    <ol class="dd-list">
                                                        <li class="dd-item" data-id="16">
                                                            <div class="dd-handle">Item 16</div>
                                                        </li>
                                                        <li class="dd-item" data-id="17">
                                                            <div class="dd-handle">Item 17</div>
                                                        </li>
                                                        <li class="dd-item" data-id="18">
                                                            <div class="dd-handle">Item 18</div>
                                                        </li>
                                                    </ol>
                                                </li>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="cf nestable-lists">
                                        <div class="dd" id="nestable3">
                                            <ol class="dd-list">
                                                <li class="dd-item dd3-item" data-id="13">
                                                    <div class="dd-handle dd3-handle">Drag</div>
                                                    <div class="dd3-content">Item 13</div>
                                                </li>
                                                <li class="dd-item dd3-item" data-id="14">
                                                    <div class="dd-handle dd3-handle">Drag</div>
                                                    <div class="dd3-content">Item 14</div>
                                                </li>
                                                <li class="dd-item dd3-item" data-id="15">
                                                    <div class="dd-handle dd3-handle">Drag</div>
                                                    <div class="dd3-content">Item 15</div>
                                                    <ol class="dd-list">
                                                        <li class="dd-item dd3-item" data-id="16">
                                                            <div class="dd-handle dd3-handle">Drag</div>
                                                            <div class="dd3-content">Item 16</div>
                                                        </li>
                                                        <li class="dd-item dd3-item" data-id="17">
                                                            <div class="dd-handle dd3-handle">Drag</div>
                                                            <div class="dd3-content">Item 17</div>
                                                        </li>
                                                        <li class="dd-item dd3-item" data-id="18">
                                                            <div class="dd-handle dd3-handle">Drag</div>
                                                            <div class="dd3-content">Item 18</div>
                                                        </li>
                                                    </ol>
                                                </li>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            var updateOutput = function(e) {
                                var list = e.length ? e : $(e.target),
                                    output = list.data('output');
                                if (window.JSON) {
                                    output.val(window.JSON.stringify(list.nestable('serialize')));
                                } else {
                                    output.val('JSON browser support required for this demo.');
                                }
                            };

                            // activate Nestable for list 1
                            $('#nestable').nestable({
                                    group: 1
                                })
                                .on('change', updateOutput);

                            // activate Nestable for list 2
                            $('#nestable2').nestable({
                                    group: 1
                                })
                                .on('change', updateOutput);
                            // activate Nestable for list 3
                            $('#nestable3').nestable({
                                    group: 1
                                })
                                .on('change', updateOutput);

                            // output initial serialised data
                            updateOutput($('#nestable').data('output', $('#nestable-output')));
                            updateOutput($('#nestable2').data('output', $('#nestable2-output')));
                            updateOutput($('#nestable3').data('output', $('#nestable3-output')));

                            $('#nestable-menu').on('click', function(e) {
                                var target = $(e.target),
                                    action = target.data('action');
                                if (action === 'expand-all') {
                                    $('.dd').nestable('expandAll');
                                }
                                if (action === 'collapse-all') {
                                    $('.dd').nestable('collapseAll');
                                }
                            });

                            $('#nestable3').nestable();
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Nestable css --&gt;
                    &lt;link href="assets/plugins/nestable-master/css/nestable.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Nestable Js --&gt;
                    &lt;script src="assets/plugins/nestable-master/js/jquery.nestable.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-toolbar">Toolbar</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Default Toolbar</h5>
                        </div>
                        <div class="card-block">
                            <div id="toolbar-options" class="hidden">
                                <a href="#!"><i class="feather icon-wifi-off"></i></a>
                                <a href="#!"><i class="feather icon-mic"></i></a>
                                <a href="#!"><i class="feather icon-battery-charging"></i></a>
                            </div>
                            <div class="row">
                                <div class="col-md-3 col-sm-6 mb-4">
                                    <h5>Light Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-default btn-toolbar-light" id="light-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-3 col-sm-6 mb-4">
                                    <h5>Dark Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-inverse btn-toolbar-dark" id="dark-toolbar"><i class="feather icon-settings"></i></div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            // [ Light-toolbar ]
                            $('#light-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'light'
                            });

                            // [ dark-toolbar ]
                            $('#dark-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'dark'
                            });
                        });
                    </script>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Colorful Toolbar</h5>
                        </div>
                        <div class="card-block">
                            <div id="toolbar-option" class="hidden">
                                <a href="#!"><i class="feather icon-wifi-off"></i></a>
                                <a href="#!"><i class="feather icon-mic"></i></a>
                                <a href="#!"><i class="feather icon-battery-charging"></i></a>
                            </div>
                            <div class="row">
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Primary Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-primary btn-toolbar-primary" id="primary-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Success Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-success btn-toolbar-success" id="success-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Info Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-info btn-toolbar-info" id="info-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Danger Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-danger btn-toolbar-danger" id="danger-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            // [ Primary-toolbar ]
                            $('#primary-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'primary'
                            });

                            // [ Success-toolbar ]
                            $('#success-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'success'
                            });

                            // [ Info-toolbar ]
                            $('#info-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'info'
                            });

                            // [ warning-toolbar ]
                            $('#warning-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'warning'
                            });

                            // [ danger-toolbar ]
                            $('#danger-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'danger'
                            });
                        });
                    </script>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Position Toolbar</h5>
                        </div>
                        <div class="card-block">
                            <div id="toolbar-option1" class="hidden">
                                <a href="#!"><i class="feather icon-wifi-off"></i></a>
                                <a href="#!"><i class="feather icon-mic"></i></a>
                                <a href="#!"><i class="feather icon-battery-charging"></i></a>
                            </div>
                            <div class="row">
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Top Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-primary btn-toolbar-primary" id="top-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Left Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-success btn-toolbar-success" id="left-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Bottom Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-info btn-toolbar-info" id="bottom-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Right Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-warning btn-toolbar-warning" id="right-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>On click Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-danger btn-toolbar-danger" id="click-toolbar" data-toolbar-event="click"><i class="feather icon-settings"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            // [ Top-toolbar ]
                            $('#top-toolbar').toolbar({
                                content: '#toolbar-options',
                                position: 'top',
                                style: 'primary'
                            });

                            // [ Left-toolbar ]
                            $('#left-toolbar').toolbar({
                                content: '#toolbar-options',
                                position: 'left',
                                style: 'success'
                            });

                            // [ Bottom-toolbar ]
                            $('#bottom-toolbar').toolbar({
                                content: '#toolbar-options',
                                position: 'bottom',
                                style: 'info'
                            });

                            // [ Right-toolbar ]
                            $('#right-toolbar').toolbar({
                                content: '#toolbar-options',
                                position: 'right',
                                style: 'warning'
                            });

                            // [ Click-toolbar ]
                            $('#click-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'danger',
                                event: 'click'
                            });
                        });
                    </script>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Animation Toolbar</h5>
                        </div>
                        <div class="card-block">
                            <div id="toolbar-option2" class="hidden">
                                <a href="#!"><i class="feather icon-wifi-off"></i></a>
                                <a href="#!"><i class="feather icon-mic"></i></a>
                                <a href="#!"><i class="feather icon-battery-charging"></i></a>
                            </div>
                            <div class="row">
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Standard Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-primary btn-toolbar-primary" id="standard-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Flip Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-success btn-toolbar-success" id="flip-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Grow Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-info btn-toolbar-info" id="grow-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Fly in Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-warning btn-toolbar-warning" id="flyin-toolbar"><i class="feather icon-settings"></i></div>
                                </div>
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <h5>Bounce Toolbar</h5>
                                    <hr>
                                    <div data-toolbar="user-options" class="btn-toolbar btn-danger btn-toolbar-danger" id="bounce-toolbar" data-toolbar-event="click"><i class="feather icon-settings"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).on('load', function() {
                            // [ standard-toolbar ]
                            $('#standard-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'primary',
                                animation: 'standard',
                            });

                            // [ flip-toolbar ]
                            $('#flip-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'success',
                                animation: 'flip',
                            });

                            // [ grow-toolbar ]
                            $('#grow-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'info',
                                animation: 'grow',
                            });

                            // [ flyin-toolbar ]
                            $('#flyin-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'warning',
                                animation: 'flyin',
                            });

                            // [ bounce-toolbar ]
                            $('#bounce-toolbar').toolbar({
                                content: '#toolbar-options',
                                style: 'danger',
                                animation: 'bounce',
                            });
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Toolbar css --&gt;
                    &lt;link href="assets/plugins/toolbar/css/jquery.toolbar.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Toolbar Js --&gt;
                    &lt;script src="assets/plugins/toolbar/js/jquery.toolbar.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
        </div>
    </div>


    <div class="datta-example-modal">
        <a href="javascript:void(0)" class="md-datta-example-modal-copy">
            <span class="feather icon-clipboard"></span>
        </a>
        <a href="javascript:void(0)" class="datta-example-modal-close">&times;</a>
        <div class="scroll-div">
            <div class="datta-example-modal-content"></div>
        </div>
    </div>

    <script src="assets/js/pcoded.min.js"></script>
    <script src="assets/js/uikit.min.js"></script>

    <script>
        $(function() {
            $('body').scrollspy({
                target: ".docs-sections-inner"
            });
            $(document).on('scroll', function() {
                var top = $(document).scrollTop();
                var left = $(document).scrollLeft();
                $('.docs-sections')[0].style.top = (top > 70 ? 0 : 70 - top) + 'px';
                $('.docs-sections')[0].style.left = (left * -1) + 'px';
            });
            $(document).ready(function() {
                var top = $(document).scrollTop();
                var left = $(document).scrollLeft();
                $('.docs-sections')[0].style.top = (top > 70 ? 0 : 70 - top) + 'px';
                $('.docs-sections')[0].style.left = (left * -1) + 'px';
            });

            $(".docs-sections-inner a").on('click', function(event) {
                if (this.hash !== "") {
                    event.preventDefault();
                    var hash = this.hash;
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top
                    }, 1500, function() {
                        window.location.hash = hash;
                    });
                }
            });
        });
    </script>

</body>
</html>
